<template>
    <div class="ba">
    <el-col :xs="24" :sm="6" :md="8" :lg="8" :xl="8"  style="margin-left: 33%; margin-top: 5%;">
        <el-card shadow="always">
            <h1 v-if="passFlag==1">考试系统</h1>
<!--            <h1 v-if="passFlag==2">考试系统(老师入口)</h1>-->
<!--            <h1 v-if="passFlag==3">考试系统(管理员入口)</h1>-->
            <el-form :model="userInfo" status-icon :rules="rules" ref="userInfo"  class="demo-userInfo">
                <el-form-item class="form-with" prop="account">
                    <el-input type="account" placeholder="账号" v-model="userInfo.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="form-with" prop="password">
                    <el-input type="password" placeholder="密码" v-model="userInfo.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="form-with">
                    <el-button style="width: 90%" size="medium" type="primary" @click="submitForm('userInfo')">登录</el-button>
                </el-form-item >
                <el-form-item class="form-with">
                    <el-button style="width: 90%" size="medium" type="primary" @click="submitForm('userInfo')">注册</el-button>
                </el-form-item>
<!--                <el-form-item class="form-with">-->
<!--                    <el-button :style="{background:(passFlag==1?'#FFA500':'#409EFF')}" @click="passFlag=1" size="medium" type="primary" >学生登录</el-button>-->
<!--                    <el-button :style="{background:(passFlag==2?'#FFA500':'#409EFF')}" @click="passFlag=2" size="medium" type="primary" >老师登录</el-button>-->
<!--                    <el-button :style="{background:(passFlag==3?'#FFA500':'#409EFF')}" @click="passFlag=3" size="medium" type="primary" >管理员</el-button>-->
<!--                </el-form-item>-->
            </el-form>
        </el-card>
    </el-col>
    </div>
</template>
<script>
    import {login} from "../../request/api";

    export default {
        data() {
            return {
                passFlag:1,
                userInfo: {
                    account: '',
                    password: '',
                },
                rules: {
                    account: [
                        {  required: true, message: '请输入账号',  trigger: 'blur' }
                    ],
                    password: [
                        {  required: true, message: '请输入密码',  trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        login(this.userInfo).then(resp=>{
                            console.log(resp)

                            if (resp.data.code == 200) {
                                let {userInfo} =resp.data.data;
                                this.$store.state.userInfo=userInfo;
                                this.isRank(userInfo);
                                this.$router.push("/studentHome")
                            }else{
                                console.log(resp.data.msg);
                                this.$message.error('请填写用户名和密码!')
                            }
                        })
                    } else {
                        this.$message.error('请填写用户名和密码!')
                        return false;
                    }
                });
            },
            isRank(userInfo){
                if (userInfo.ranked == 0) {
                    this.$message.success('学生身份，登录成功');
                }; if (userInfo.ranked == 1) {
                    this.$message.success('老师身份，登录成功');
                }; if (userInfo.ranked == 2) {
                    this.$message.success('管理员身份，登录成功');
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
<style>
    .form-with{
        width: 90%;
        margin: 0 auto;
    }
    .ba{
        background-color: #42b983;
    }
</style>